.hzdz-traffic-capacity-chart {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  background: #0a0e13;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  .chart-area{
    width: 100%;
    height: 100%;
    color: #58FFF6;
  }
  // 深色主题
  &.dark {
    background: transparent;
    color: #ffffff;

    .legend {
      color: #ffffff;
    }

    svg {
      .grid line {
        stroke: #333333;
        stroke-opacity: 0.3;
      }

      .axis line {
        stroke: #999999;
      }

      text {
        fill: #ffffff;
      }
    }
  }

  // 浅色主题
  &.light {
    background: #ffffff;
    color: #333333;

    .legend {
      color: #333333;
    }

    svg {
      .grid line {
        stroke: #e0e0e0;
        stroke-opacity: 0.5;
      }

      .axis line {
        stroke: #666666;
      }

      text {
        fill: #333333;
      }
    }
  }

  // 图例样式
  .legend {
    padding: 8px 16px;
    font-size: 12px;
    user-select: none;

    &.legend-top {
      order: -1;
      margin-bottom: 8px;
    }

    &.legend-bottom {
      order: 1;
      margin-top: 8px;
    }

    &.legend-left {
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      flex-direction: column;
      width: 100px;
    }

    &.legend-right {
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      flex-direction: column;
      width: 100px;
    }
  }

  // SVG 动画
  svg {
    path {
      stroke-dasharray: 1000;
      stroke-dashoffset: 1000;
      animation: drawLine 2s ease-out forwards;
    }

    circle {
      opacity: 0;
      animation: fadeInDot 0.5s ease-out forwards;
      animation-delay: 2s;
      transition: r 0.2s ease;

      &:hover {
        filter: drop-shadow(0 0 6px currentColor);
      }
    }

    text {
      font-size: 12px;
      font-weight: normal;
    }

    .axis text {
      font-size: 11px;
    }
  }

  // 响应式设计
  @media (max-width: 768px) {
    .legend {
      font-size: 10px;
      gap: 8px !important;

      &.legend-left,
      &.legend-right {
        position: static;
        transform: none;
        width: auto;
        flex-direction: row;
        margin: 8px 0;
      }
    }

    svg text {
      font-size: 10px;
    }

    svg .axis text {
      font-size: 9px;
    }
  }

  @media (max-width: 480px) {
    .legend {
      font-size: 9px;
      padding: 6px 12px;
    }

    svg text {
      font-size: 9px;
    }

    svg .axis text {
      font-size: 8px;
    }
  }
}

// 动画定义
@keyframes drawLine {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes fadeInDot {
  to {
    opacity: 1;
  }
}
